import Layout from '@components/layout';
import { Profile as ProfileApi } from '@lib/api/my';
import { IUser } from '@lib/types';
import { refresh } from '@store/action/user';
import { Button, Card, Form, Input, message, Radio, Spin } from 'antd';
import { RadioChangeEvent } from 'antd/lib/radio';
import * as React from 'react';
import { connect } from 'react-redux';

interface IProfileProps {
	user: IUser;
	refresh: () => void;
}

interface IProfileState {
	user: IUser;
	loading: boolean;
}

class Profile extends React.Component<IProfileProps, IProfileState> {
	constructor(props: any) {
		super(props);
		this.state = {
			user: Object.assign({}, this.props.user),
			loading: false
		}
		this.onSubmit = this.onSubmit.bind(this);
		this.onRadioChange = this.onRadioChange.bind(this);
		this.onInputChange = this.onInputChange.bind(this);
		this.onInputBlur = this.onInputBlur.bind(this);
	}
	public componentWillReceiveProps(props: any) {
		if (props.user) {
			this.setState({
				user: Object.assign({}, props.user)
			});
		}
	}
	public onRadioChange(e: RadioChangeEvent) {
		const res = Object.assign({}, this.state.user);
		res.display_id = e.target.value;
		this.setState({
			user: res
		});
	}
	public onInputChange(e: React.ChangeEvent<HTMLInputElement>) {
		const res: any = Object.assign({}, this.state.user);
		res[e.target.name] = e.target.value;
		this.setState({
			user: res
		});
	}
	public onInputBlur(e: React.FocusEvent<HTMLInputElement>) {
		const res: any = Object.assign({}, this.state.user);
		if (typeof (res[e.target.name]) !== "undefined") {
			let value = e.target.value;
			switch (e.target.name) {
				case 'bilibili_id':
					if (value.includes('space.bilibili.com')) {
						const id = value.match(/space\.bilibili\.com\/(\d+)/);
						value = id ? id[1] : "";
					}
					break;
				case 'nga_id':
					if (value.includes('nuke.php?func=ucp')) {
						const id = value.match(/uid=(\d+)/);
						value = id ? id[1] : "";
					}
					break;
				case 'weibo_id':
					if (value.includes('weibo')) {
						for (const it of [/weibo\.com\/u\/(\d+)/, /weibo\.cn\/u\/(\d+)/, /weibo\.com\/(\w+)/]) {
							const id = value.match(it);
							if (id) {
								value = id[1];
								break;
							}
						}
					}
					break;
			}
			res[e.target.name] = value;
		}
		this.setState({
			user: res
		});
	}
	public async onSubmit(e: React.FormEvent) {
		e.preventDefault();
		this.setState({
			loading: true
		});
		const res = await ProfileApi({
			display_id: this.state.user.display_id,
			bilibili_id: this.state.user.bilibili_id,
			nga_id: this.state.user.nga_id,
			weibo_id: this.state.user.weibo_id
		});
		if (res instanceof Error) {
			message.error(res.message);
		} else {
			message.success('保存成功');
			await this.props.refresh();
		}
		this.setState({
			loading: false
		});
	}
	public render() {
		return (
			<Layout title="个人设置">
				<Card title="个人设置">
					<Spin spinning={this.state.loading}>
						<Form layout="horizontal" onSubmit={this.onSubmit}>
							<Form.Item label="显示ID" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
								<Radio.Group onChange={this.onRadioChange} value={this.state.user.display_id}>
									<Radio value="0">仅显示名称</Radio>
									<Radio value="1">显示完整ID</Radio>
								</Radio.Group>
							</Form.Item>
							<Form.Item label="Bilibili账号ID" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} help="将个人空间地址粘贴到文本框中，即可自动识别出ID">
								<Input name="bilibili_id" onChange={this.onInputChange} onBlur={this.onInputBlur} value={this.state.user.bilibili_id} />
							</Form.Item>
							<Form.Item label="NGA账号ID" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} help="将论坛用户中心地址粘贴到文本框中，即可自动识别出ID">
								<Input name="nga_id" onChange={this.onInputChange} onBlur={this.onInputBlur} value={this.state.user.nga_id} />
							</Form.Item>
							<Form.Item label="微博ID" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} help="将个人主页链接粘贴到文本框中，即可自动识别出ID">
								<Input name="weibo_id" onChange={this.onInputChange} onBlur={this.onInputBlur} value={this.state.user.weibo_id} />
							</Form.Item>
							<Form.Item wrapperCol={{ offset: 4, span: 20 }}>
								<Button type="primary" htmlType="submit">保存</Button>
							</Form.Item>
						</Form>
					</Spin>
				</Card>
			</Layout>
		);
	}
}

const mapStateToProps = (state: any) => ({
	user: state.user
});

export default connect(mapStateToProps, { refresh })(Profile);